<script setup lang="ts">
import { ref, nextTick, reactive } from "vue"
import * as echarts from "echarts"
import "echarts/renderers"
import { getStatisticsUserDetailsTypeApi as getStatisticsTypeApi } from "@/api/billv2"
import dayjs from "dayjs"
const currentDate = dayjs()

const title = ref<string>("详情")
const dialog = ref(false)
const chartRefs = ref<any>(null)
// const chartRefs2 = ref<any>(null)
// const chartRefs3 = ref<any>(null)
const listData = ref<any[]>([])
const differenceData = ref<any[]>([])
const listKeys = ref<any[]>([])
const total = ref<number>(0)
const difference = ref<number>(0)
const searchData = reactive({
  id: 0,
  year: currentDate.format("YYYY")
})
const getTable = async () => {
  await getStatisticsTypeApi({
    ...searchData
  }).then((res: any) => {
    console.log("getStatisticsTypeApigetStatisticsTypeApigetStatisticsTypeApigetStatisticsTypeApi")
    console.log(res)
    listData.value = res.data.data
    listKeys.value = res.data.key
    differenceData.value = res.data.difference
    total.value = res.data.yearNum.total_amount
    difference.value = res.data.yearNum.total_difference
  })
}

const batchShow = async (row: any) => {
  console.log(row)
  dialog.value = true
  searchData.id = row.id
  title.value = row.name
  await getTable()
  await nextTick(() => {
    console.log("nextTicknextTicknextTicknextTicknextTicknextTick")
    echartsInit()
    // echartsInit2()
  })
}

const echartsInit = () => {
  if (chartRefs.value) {
    console.log("echartsInit")
    console.log("echartsInitechartsInitechartsInitechartsInit", listData.value)
    const chartInstanceBar = echarts.init(chartRefs.value)
    const optionBar = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      legend: {
        left: "center"
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          data: listKeys.value,
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            show: true,
            color: "#333"
          }
        }
      ],
      yAxis: [
        {
          name: "单位：万元",
          type: "value",
          position: "left",
          axisLabel: {
            show: true,
            color: "#333"
          }
        },
        {
          type: "value",
          name: "差额：万元",
          position: "right",
          alignTicks: true,
          axisLine: {
            show: true,
            color: "#333"
          }
        }
      ],
      series: [
        {
          name: "金额",
          type: "bar",
          data: listData.value,
          stack: "total",
          emphasis: {
            focus: "series"
          },
          label: {
            show: true,
            position: "inside"
          }
        },
        {
          name: "差额",
          type: "line",
          stack: "total",
          label: {
            show: true,
            position: "top"
          },
          yAxisIndex: 1,
          emphasis: {
            focus: "series"
          },
          data: differenceData.value
        }
      ]
    }
    chartInstanceBar.setOption(optionBar)
  }
}

// const echartsInit2 = () => {
//   if (chartRefs2.value) {
//     // 初始化柱状图实例
//     const chartInstanceBar = echarts.init(chartRefs2.value) // 假设 chartRefs.value 是一个包含多个 DOM 元素的数组
//     const optionBar = {
//       tooltip: {
//         trigger: "axis",
//         axisPointer: {
//           type: "shadow"
//         }
//       },
//       legend: {
//         left: "center"
//       },
//       grid: {
//         left: "3%",
//         right: "4%",
//         bottom: "3%",
//         containLabel: true
//       },
//       xAxis: [
//         {
//           type: "category",
//           data: listKeys.value,
//           axisTick: {
//             alignWithLabel: true
//           },
//           axisLabel: {
//             show: true,
//             color: "#333"
//           }
//         }
//       ],
//       yAxis: [
//         {
//           name: "单位：万元",
//           type: "value",
//           axisLabel: {
//             show: true,
//             color: "#333"
//           }
//         }
//       ],
//       series: [
//         {
//           name: "金额1",
//           type: "bar",
//           data: listData.value,
//           stack: "total",
//           emphasis: {
//             focus: "series"
//           },
//           label: { show: true }
//         }
//       ]
//     }
//     chartInstanceBar.setOption(optionBar)
//   }
//   if (chartRefs3.value) {
//     // 初始化折线图实例
//     const chartInstanceLine = echarts.init(chartRefs3.value) // 假设第二个 DOM 元素在 chartRefs.value 中
//     const optionLine = {
//       tooltip: {
//         trigger: "axis",
//         axisPointer: {
//           type: "line"
//         }
//       },
//       legend: {
//         left: "center"
//       },
//       grid: {
//         left: "3%",
//         right: "4%",
//         bottom: "3%",
//         containLabel: true
//       },
//       xAxis: [
//         {
//           type: "category",
//           data: listKeys.value,
//           axisTick: {
//             alignWithLabel: true
//           },
//           axisLabel: {
//             show: true,
//             color: "#333"
//           }
//         }
//       ],
//       yAxis: [
//         {
//           name: "差额",
//           type: "value",
//           axisLabel: {
//             show: true,
//             color: "#333"
//           }
//         }
//       ],
//       series: [
//         {
//           name: "差额",
//           type: "line",
//           data: differenceData.value,
//           label: {
//             show: true
//           },
//           emphasis: {
//             focus: "series"
//           }
//         }
//       ]
//     }
//     chartInstanceLine.setOption(optionLine)
//   }
// }
defineExpose({ batchShow })

/** 关闭搜索对话框 */
const handleClose = () => {
  setTimeout(() => {
    listKeys.value = []
    listData.value = []
    title.value = "详情"
    searchData.id = 0
    searchData.year = currentDate.format("YYYY")
  }, 200)
  dialog.value = false
}

const handleDateChange = async (value: string) => {
  console.log(value)
  await getTable()
  await nextTick(() => {
    console.log("nextTicknextTicknextTicknextTicknextTicknextTick")
    echartsInit()
    // echartsInit2()
  })
}
const customYearTimeFormat = ref<string>("YYYY")
</script>

<template>
  <div>
    <el-dialog v-model="dialog" :title="title" width="80%" destroy-on-close draggable :before-close="handleClose">
      <div>
        <el-date-picker
          v-model="searchData.year"
          type="year"
          placeholder="请选择"
          :format="customYearTimeFormat"
          :value-format="customYearTimeFormat"
          @change="handleDateChange"
        />
      </div>
      <div class="titles">
        合计(万元)：票面金额&nbsp;&nbsp;{{ total }}&nbsp;&nbsp;&nbsp;&nbsp; 差额&nbsp;&nbsp;{{ difference }}
      </div>
      <div ref="chartRefs" style="height: 400px" />
      <!-- <div class="charts">
        <div ref="chartRefs2" style="height: 400px; width: 50%"></div>
        <div ref="chartRefs3" style="height: 400px; width: 50%"></div>
      </div> -->
      <!-- <div ref="chartRefs2" style="height: 400px" /> -->
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.titles {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}
.charts {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 400px;
}
</style>
